<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>更多车辆信息</title>
  <!-- import CSS -->
  <link rel="shortcut icon" href="../favicon.ico">
  <link rel="stylesheet" href="../plugins/ElementUI/index-2.3.9.css">
  <link href="../css/common.css" rel="stylesheet">
  <!-- import Vue before Element -->
  <script src="../plugins/ElementUI/vue-2.5.16.js"></script>
  <!-- import JavaScript -->
  <script src="../plugins/ElementUI/index-2.3.9.js"></script>
  <script src="../plugins/ElementUI/vue-resource.min.js"></script>
</head>
<body>
  <div id="app" v-cloak v-show="appShow">
    <el-tabs tab-position="left" style="height: 100%;">
      <el-tab-pane label="整车数据">
        <div class="el-more-list" v-if="moreData.fullVehicleInfo">
          <div class="el-more-item">
            <span>车辆状态：</span>
            <span>{{moreData.fullVehicleInfo.status || "未知"}}</span>
          </div>
          <div class="el-more-item">
            <span>充电状态：</span>
            <span>{{moreData.fullVehicleInfo.chargStatus || "未知"}}</span>
          </div>
          <div class="el-more-item">
            <span>运行模式：</span>
            <span>{{moreData.fullVehicleInfo.runMode || "未知"}}</span>
          </div>
          <div class="el-more-item">
            <span>车速：</span>
            <span>{{moreData.fullVehicleInfo.speed || "未知"}} (km/h)</span>
          </div>
          <div class="el-more-item">
            <span>累计里程：</span>
            <span>{{moreData.fullVehicleInfo.totalMileage || "未知"}} (km)</span>
          </div>
          <div class="el-more-item">
            <span>总电压：</span>
            <span>{{moreData.fullVehicleInfo.totalVoltage || "未知"}} (V)</span>
          </div>
          <div class="el-more-item">
            <span>总电流：</span>
            <span>{{moreData.fullVehicleInfo.totalCurrent || "未知"}} (A)</span>
          </div>
          <div class="el-more-item">
            <span>SOC电量：</span>
            <span>{{moreData.fullVehicleInfo.soc || "未知"}} (%)</span>
          </div>
          <div class="el-more-item">
            <span>DC-DC状态：</span>
            <span>{{moreData.fullVehicleInfo.dcStatus || "未知"}}</span>
          </div>
          <div class="el-more-item">
            <span>档位：</span>
            <span>{{moreData.fullVehicleInfo.gear || "未知"}}</span>
          </div>
          <div class="el-more-item">
            <span>绝缘电阻：</span>
            <span>{{moreData.fullVehicleInfo.insResistance || "未知"}} (kΩ)</span>
          </div>
          <div class="el-more-item">
            <span>加速踏板行程值：</span>
            <span>{{moreData.fullVehicleInfo.speedStrokeValue || "未知"}} (%)</span>
          </div>
          <div class="el-more-item">
            <span>制动踏板状态：</span>
            <span>{{moreData.fullVehicleInfo.brakePedalCondition || "未知"}}</span>
          </div>
          <div class="el-more-item">
            <span>制动力：</span>
            <span>{{moreData.fullVehicleInfo.brakingForce || "未知"}}</span>
          </div>
          <div class="el-more-item">
            <span>驱动力：</span>
            <span>{{moreData.fullVehicleInfo.driveForce || "未知"}}</span>
          </div>
        </div>
        <div v-else>  <el-alert title="暂无数据" type="info" :closable="false"></el-alert></div>
      </el-tab-pane>
      <el-tab-pane label="驱动电机数据">
        <div class="el-more-list someMore" v-for="item in moreData.motoInfo" v-if="moreData.motoInfo">
          <div class="el-more-item">
            <span>驱动电机序号：</span>
            <span>{{item.driveMotorSerialNum || "未知"}}</span>
          </div>
          <div class="el-more-item">
            <span>驱动电机状态：</span>
            <span>{{item.driveMotorStatus || "未知"}}</span>
          </div>
          <div class="el-more-item">
            <span>驱动电机控制器温度：</span>
            <span>{{item.driveMotorConTemp || "未知"}} (℃)</span>
          </div>
          <div class="el-more-item">
            <span>驱动电机转速：</span>
            <span>{{item.driveMotorSpeed || "未知"}} (r/min)</span>
          </div>
          <div class="el-more-item">
            <span>驱动电机转矩：</span>
            <span>{{item.driveMotorTorque || "未知"}} (N·m)</span>
          </div>
          <div class="el-more-item">
            <span>驱动电机温度：</span>
            <span>{{item.driveMotorTemp || "未知"}} (℃)</span>
          </div>
          <div class="el-more-item">
            <span>电机控制器输入电压：</span>
            <span>{{item.motorContInVol || "未知"}} (V)</span>
          </div>
          <div class="el-more-item">
            <span>电机控制器直流母线电流：</span>
            <span>{{item.motorConDcBusCur || "未知"}} (A)</span>
          </div>
        </div>
        <div v-else>  <el-alert title="暂无数据" type="info" :closable="false"></el-alert></div>
      </el-tab-pane>
      <el-tab-pane label="车辆位置数据">
        <div class="el-more-list" v-if="moreData.locationInfo">
          <div class="el-more-item">
            <span>定位状态：</span>
            <span>{{moreData.locationInfo.positionStatus  || "未知"}}</span>
          </div>
          <div class="el-more-item">
            <span>经度：</span>
            <span>{{moreData.locationInfo.lng  || "未知"}}</span>
          </div>
          <div class="el-more-item">
            <span>纬度：</span>
            <span>{{moreData.locationInfo.lat  || "未知"}}</span>
          </div>
        </div>
        <div v-else>  <el-alert title="暂无数据" type="info" :closable="false"></el-alert></div>
      </el-tab-pane>
      <el-tab-pane label="极值数据">
        <div class="el-more-list" v-if="moreData.abxMaxInfo">
          <div class="el-more-item">
            <span>最高电压电池子系统号：</span>
            <span>{{moreData.abxMaxInfo.hvolBatSubNum || "未知"}}</span>
          </div>
          <div class="el-more-item">
            <span>最高电压电池单体代号:</span>
            <span>{{moreData.abxMaxInfo.hvolBatCellNum || "未知"}}</span>
          </div>
          <div class="el-more-item">
            <span>电池单体电压最高值：</span>
            <span>{{moreData.abxMaxInfo.maxBatVoltage || "未知"}} (V)</span>
          </div>
          <div class="el-more-item">
            <span>最低电压电池子系统号：</span>
            <span>{{moreData.abxMaxInfo.lvolBatSubNum || "未知"}}</span>
          </div>
          <div class="el-more-item">
            <span>最低电压电池单体代号：</span>
            <span>{{moreData.abxMaxInfo.lvolBatCellNum || "未知"}}</span>
          </div>
          <div class="el-more-item">
            <span>电池单体电压最低值：</span>
            <span>{{moreData.abxMaxInfo.lvolCell || "未知"}} (V)</span>
          </div>
          <div class="el-more-item">
            <span>最高温度子系统号：</span>
            <span>{{moreData.abxMaxInfo.htempSubNum || "未知"}}</span>
          </div>
          <div class="el-more-item">
            <span>最高温度探针序号：</span>
            <span>{{moreData.abxMaxInfo.htempProSerialNum || "未知"}}</span>
          </div>
          <div class="el-more-item">
            <span>最高温度值：</span>
            <span>{{moreData.abxMaxInfo.maxTemp || "未知"}} (℃)</span>
          </div>
          <div class="el-more-item">
            <span>最低温度子系统号：</span>
            <span>{{moreData.abxMaxInfo.ltempSubNum || "未知"}}</span>
          </div>
          <div class="el-more-item">
            <span>最低温度探针序号：</span>
            <span>{{moreData.abxMaxInfo.ltempProSerialNum || "未知"}}</span>
          </div>
          <div class="el-more-item">
            <span>最低温度：</span>
            <span>{{moreData.abxMaxInfo.minTemp || "未知"}} (℃)</span>
          </div>
        </div>
        <div v-else>  <el-alert title="暂无数据" type="info" :closable="false"></el-alert></div>
      </el-tab-pane>
      <el-tab-pane label="报警数据">
        <div class="el-more-list"  v-if="moreData.alarmInfo">
            <div class="el-more-item">
              <span>最高报警等级：</span>
              <span>{{moreData.alarmInfo.halarmLevel || "未知"}}</span>
            </div>
            <div class="el-more-item">
              <span>通用报警标识：</span>
              <span>{{moreData.alarmInfo.generalAlarm || "未知"}}</span>
            </div>
            <div class="el-more-item">
              <span>可充电储能装置故障总数：</span>
              <span>{{moreData.alarmInfo.totalStorageFaults || "未知"}}</span>
            </div>
            <div class="el-more-item">
              <span>可充电储能装置故障代码列表：</span>
              <span>{{moreData.alarmInfo.storageFaults || "未知"}}</span>
            </div>
            <div class="el-more-item">
              <span>驱动电机故障总数：</span>
              <span>{{moreData.alarmInfo.totalMotorFaults || "未知"}}</span>
            </div>
            <div class="el-more-item">
              <span>驱动电机故障代码列表：</span>
              <span>{{moreData.alarmInfo.motorFaults || "未知"}}</span>
            </div>
            <div class="el-more-item">
              <span>发动机故障总数：</span>
              <span>{{moreData.alarmInfo.totalEngineFaults || "未知"}}</span>
            </div>
            <div class="el-more-item">
              <span>发动机故障代码列表：</span>
              <span>{{moreData.alarmInfo.engineFaults || "未知"}}</span>
            </div>
            <div class="el-more-item">
              <span>其他故障总数：</span>
              <span>{{moreData.alarmInfo.totalOtherFaults || "未知"}}</span>
            </div>
            <div class="el-more-item">
              <span>其他故障代码列表：</span>
              <span>{{moreData.alarmInfo.otherFaults || "未知"}}</span>
            </div>
        </div>
        <div v-else>  <el-alert title="暂无数据" type="info" :closable="false"></el-alert></div>
        <div class="el-more-list someMore" v-show="showWarnList">
          <p style="margin-left: 20px;color: #18A689;">通用报警标识：</p>
          <div class="el-more-item" v-for="item in moreData.alarmInfo.generalAlarmDetail">
            <span>{{item}}</span>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="燃料电池数据">
        <div class="el-more-list" v-if="moreData.fullCellInfo">
          <div class="el-more-item">
            <span>燃料电池电压：</span>
            <span>{{moreData.fullCellInfo.fuelCellVol || "未知"}} (V)</span>
          </div>
          <div class="el-more-item">
            <span>燃料电池电流：</span>
            <span>{{moreData.fullCellInfo.fuelCellCur || "未知"}} (A)</span>
          </div>
          <div class="el-more-item">
            <span>燃料消耗率：</span>
            <span>{{moreData.fullCellInfo.fuelRate || "未知"}} (kg/100km)</span>
          </div>
          <div class="el-more-item">
            <span>燃料电池温度探针总数：</span>
            <span>{{moreData.fullCellInfo.fuelCellTempProTotal || "未知"}}</span>
          </div>
          <div class="el-more-item">
            <span>探针温度值：</span>
            <span>{{moreData.fullCellInfo.probeTempValue || "未知"}} (℃)</span>
          </div>
          <div class="el-more-item">
            <span>氢系统中最高温度：</span>
            <span>{{moreData.fullCellInfo.hTempHydrogen || "未知"}} (℃)</span>
          </div>
          <div class="el-more-item">
            <span>氢系统中最高温度探针代号：</span>
            <span>{{moreData.fullCellInfo.maxTempProCodeHydrogen || "未知"}}</span>
          </div>
          <div class="el-more-item">
            <span>氢气最高浓度：</span>
            <span>{{moreData.fullCellInfo.maxHydrogenCon || "未知"}} (mg/kg)</span>
          </div>
          <div class="el-more-item">
            <span>氢气最高浓度传感器代号：</span>
            <span>{{moreData.fullCellInfo.hydMaxConSensorCode || "未知"}}</span>
          </div>
          <div class="el-more-item">
            <span>氢气最高压力：</span>
            <span>{{moreData.fullCellInfo.maxHydPressure || "未知"}} (MPa)</span>
          </div>
          <div class="el-more-item">
            <span>氢气最高压力传感器代号：</span>
            <span>{{moreData.fullCellInfo.maxHydPressureProCode || "未知"}}</span>
          </div>
          <div class="el-more-item">
            <span>高压DC/DC状态：</span>
            <span>{{moreData.fullCellInfo.dcStatus || "未知"}}</span>
          </div>
        </div>
        <div v-else>  <el-alert title="暂无数据" type="info" :closable="false"></el-alert></div>
      </el-tab-pane>
      <el-tab-pane label="发动机数据">
        <div class="el-more-list" v-if="moreData.engineInfo">
            <div class="el-more-item">
              <span>发动机状态：</span>
              <span>{{moreData.engineInfo.engineStatus || "未知"}}</span>
            </div>
            <div class="el-more-item">
              <span>曲轴转速：</span>
              <span>{{moreData.engineInfo.crankSpeed || "未知"}} (r/min)</span>
            </div>
            <div class="el-more-item">
              <span>燃料消耗率：</span>
              <span>{{moreData.engineInfo.conRate || "未知"}} (L/100km)</span>
            </div>
        </div>
        <div v-else>  <el-alert title="暂无数据" type="info" :closable="false"></el-alert></div>
      </el-tab-pane>
      <el-tab-pane label="电池组电压数据">
        <div id="VoltageInfo" v-if="VoltageInfo"></div>
        <div v-else>  <el-alert title="暂无数据" type="info" :closable="false"></el-alert></div>
      </el-tab-pane>
      <el-tab-pane label="电池组温度数据">
        <div id="TempInfo" v-if="TempInfo"></div>
        <div v-else>  <el-alert title="暂无数据" type="info" :closable="false"></el-alert></div>
      </el-tab-pane>
    </el-tabs>
  </div>
</body>
  <script src="../plugins/ECharts/echarts-4.1.0.js"></script>
  <script src="../plugins/Underscore/underscore-min.js"></script>
  <script src="../js/ApiRequest.js"></script>
  <script>

    var vm = new Vue({
      el: '#app',
      data: function() {
        return { 
          appShow:false,
          vinCode:"",
          date:"",
          moreData:{
            fullVehicleInfo:{},
            motoInfo:[],
            locationInfo:{},
            abxMaxInfo:{},
            alarmInfo:{},
            fullCellInfo:{},
            engineInfo:{},
          },
          TempInfo:{},
          VoltageInfo:{},
          showWarnList:false
        }
      },
      mounted:function(){
        this.$nextTick(function(){
          this.vinCode = getQueryString('code');
          this.date = getQueryString('date');
          this.requestModel();
        })
      },
      updated:function(){
        this.appShow = true
      },
      methods: {
        requestModel:function(){
          var data = {
            "vinCode":this.vinCode,
            "date":this.date
          }
          resourceRequst("/vehicle/queryStatusDetailInfo",data,function(res){            
              var data1 = JSON.parse(res.batteryTempInfo.tempProbeValues);
              var data2 = JSON.parse(res.batteryVoltageInfo.singleCellVoltages);
              vm.moreData = res;
              vm.TempInfo = data1;
              vm.VoltageInfo = data2;  
              
              if(vm.moreData.alarmInfo.generalAlarmDetail.length){
                vm.showWarnList = true
              }else{
                vm.showWarnList = false
              }
          })
        }
      },
      watch:{
        VoltageInfo:function(val){
          var dom = document.getElementById("VoltageInfo");
          dom.style.width = (window.innerWidth - 193) + 'px';
          dom.style.height = (window.innerHeight - 193) + 'px';
          var xData = [];
          _.each(val,function(element, index){
            var _index = index+1;
            xData.push(_index)
          })
          var temp = echarts.init(dom);
          var option = {
              tooltip:{},
              xAxis: {
                  type: 'category',
                  data: xData,
                  splitLine: {
                      //show: true
                  }
              },
              yAxis: {
                  type: 'value',
                  axisLabel: {
                      formatter: '{value} V'
                  }
              },
              dataZoom: [
                  {
                      id: 'dataZoomX',
                      type: 'slider',
                      xAxisIndex: [0],
                      filterMode: 'filter',
                      start: 0,
                      end: 30
                  }
              ],
              series: [{
                  data: val,
                  type: 'bar',
                  barWidth:30,
              }]
          };
          temp.setOption(option);
        },
        TempInfo:function(val){
          var dom = document.getElementById("TempInfo");
          dom.style.width = (window.innerWidth - 193) + 'px';
          dom.style.height = (window.innerHeight - 193) + 'px';
          var xData = [];
          _.each(val,function(element, index){
            var _index = index+1;
            xData.push(_index)
          })
          var temp = echarts.init(dom);
          var option = {
              tooltip:{},
              xAxis: {
                  type: 'category',
                  data: xData,
              },
              yAxis: {
                  type: 'value',
                  axisLabel: {
                      formatter: '{value} °C'
                  }
              },
              dataZoom: [
                  {
                      id: 'dataZoomX',
                      type: 'slider',
                      xAxisIndex: [0],
                      filterMode: 'filter',
                      start: 0,
                      end: 30
                  }
              ],
              series: [{
                  data: val,
                  type: 'bar',
                  barWidth:30,
              }]
          };
          temp.setOption(option);
        }
      }
    })
  </script>
</html>